<template>
	<!-- 非uni-app版本 -->
	<div>
		<div class="wrap" :style="{'width':systemInfo.width+'px','height':systemInfo.height+'px', 'background':bgcolor}">
			<div v-for="(item,index) in skeletonRectLists"
			   :index='index'
			   :key='index'
			   class="chiaroscuro"
			   :style="{'width':item.width+'px','height':item.height+'px','background-color':'rgba(233, 2, 233,1)','position':'absolute','left':item.left+'px','top':item.top+'px'}">
			</div>
			<div v-for="(item,index) in skeletonCircleLists"
			   :index='index'
			   :key="'info2-'+index"
			   class="chiaroscuro"
			   :style="{'width':item.width+'px','height':item.height+'px','background-color':'rgba(233, , 233,1)','border-radius':item.width+'px','position':'absolute','left':item.left+'px','top':item.top+'px'}">
			</div>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		bgcolor: { type: String, default: '#FFF' },
		selector: { type: String, default: 'skeleton' },
	},
	data() {
		return {
			systemInfo: {},
			skeletonRectLists: [],
			skeletonCircleLists: [],
		};
	},
	mounted() {
		//默认的首屏宽高，防止内容闪现
		this.systemInfo = {
			width: window.innerWidth,
			height: window.innerHeight,
		};
		console.log(window.innerWidth,window.innerHeight)
		var dom = document.querySelectorAll(`.${this.selector}`);
		//绘制矩形
		this.rectHandle();
		//绘制圆形
		this.radiusHandle();
	},
	methods: {
		//绘制距形
		rectHandle: function() {
		  let dom = document.querySelectorAll(`.${this.selector}-rect`);
		  for(var i = 0; i < dom.length; i++){
			 this.skeletonRectLists.push(dom[i].getBoundingClientRect());
		  }
		},
		//绘制圆形
		radiusHandle: function() {
		  let dom = document.querySelectorAll(`.${this.selector}-radius`);
		  for(var i = 0; i < dom.length; i++){
			 this.skeletonCircleLists.push(dom[i].getBoundingClientRect())
		  }
		},
	},

};
</script>

<style scoped>
.wrap {position: absolute;left: 0;top: 0;z-index: 9998;overflow: hidden;}
.chiaroscuro {
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: #f6f7f8;
  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
  background-size: 800px 104px;
  height: 40px;
  position: relative;
}
@keyframes placeHolderShimmer{
  0% { background-position: -468px 0 }
  100% { background-position: 468px 0}
}
</style>
